<template>
  <div class="home-container">
    <!-- 页面标题 -->
    <h1 class="page-title">城市信息平台</h1>

    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-box">
        <input
          type="text"
          v-model="searchQuery"
          @keyup.enter="handleSearch"
          placeholder="搜索城市名称..."
          class="search-input"
        >
        <button
          @click="handleSearch"
          class="search-btn"
        >
          <i class="fas fa-search"></i>
        </button>
      </div>

      <!-- 搜索结果提示 -->
      <div
        v-if="searchResults.length > 0"
        class="search-results"
      >
        <div
          v-for="city in searchResults"
          :key="city.id"
          class="result-item"
          @click="navigateToCity(city.id)"
        >
          {{ city.name }} ({{ city.country }})
        </div>
      </div>
    </div>

    <!-- 轮播图区域 -->
    <div class="carousel">
      <div
        class="carousel-slide"
        :class="{ active: currentSlide === index }"
        v-for="(slide, index) in carouselImages"
        :key="index"
      >
        <img
          :src="slide.url"
          :alt="slide.city + ' 风景'"
          class="carousel-img"
        >
        <div class="carousel-caption">
          <h3>{{ slide.city }}</h3>
        </div>
      </div>

      <!-- 轮播控制按钮 -->
      <button
        class="carousel-control prev"
        @click="prevSlide"
      >
        <i class="fas fa-chevron-left"></i>
      </button>
      <button
        class="carousel-control next"
        @click="nextSlide"
      >
        <i class="fas fa-chevron-right"></i>
      </button>

      <!-- 轮播指示器 -->
      <div class="carousel-indicators">
        <button
          v-for="(slide, index) in carouselImages"
          :key="index"
          :class="{ active: currentSlide === index }"
          @click="goToSlide(index)"
        ></button>
      </div>
    </div>

    <!-- 城市亮点部分 -->
    <div class="city-highlights">
      <h2>热门城市</h2>
      <div class="highlights-grid">
        <div
          class="city-card"
          v-for="city in featuredCities"
          :key="city.id"
          @click="navigateToCity(city.id)"
        >
          <img
            :src="city.imageUrl"
            :alt="city.name"
            class="city-card-img"
          >
          <div class="city-card-info">
            <h3>{{ city.name }}</h3>
            <p>{{ city.tagline }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

// 路由实例
const router = useRouter();

// 搜索相关 - 扩展了更多城市
const searchQuery = ref('');
const searchResults = ref([]);
const cities = ref([
  { id: 1, name: '北京', country: '中国', tagline: '中国的首都' },
  { id: 2, name: '上海', country: '中国', tagline: '国际大都市' },
  { id: 3, name: '纽约', country: '美国', tagline: '世界金融中心' },
  { id: 4, name: '东京', country: '日本', tagline: '日本的首都' },
  { id: 5, name: '伦敦', country: '英国', tagline: '大不列颠的心脏' },
  { id: 6, name: '巴黎', country: '法国', tagline: '浪漫之都' },
  { id: 7, name: '悉尼', country: '澳大利亚', tagline: '南半球的明珠' },
  { id: 8, name: '香港', country: '中国', tagline: '东方之珠' },
  { id: 9, name: '新加坡', country: '新加坡', tagline: '花园城市' },
  { id: 10, name: '首尔', country: '韩国', tagline: '韩国的首都' }
]);

// 轮播图数据 - 扩展了更多城市
const carouselImages = ref([
  { url: 'https://picsum.photos/id/1067/1200/400', city: '北京' },
  { url: 'https://picsum.photos/id/1031/1200/400', city: '上海' },
  { url: 'https://picsum.photos/id/1039/1200/400', city: '纽约' },
  { url: 'https://picsum.photos/id/1052/1200/400', city: '东京' },
  { url: 'https://picsum.photos/id/1061/1200/400', city: '伦敦' },
  { url: 'https://picsum.photos/id/1060/1200/400', city: '巴黎' }
]);

// 轮播状态
const currentSlide = ref(0);
let slideInterval;

// 精选城市 - 扩展了更多城市
const featuredCities = ref([
  {
    id: 1,
    name: '北京',
    tagline: '历史与现代交融的古都',
    imageUrl: 'https://picsum.photos/id/1059/400/300'
  },
  {
    id: 2,
    name: '上海',
    tagline: '东方明珠，国际金融中心',
    imageUrl: 'https://picsum.photos/id/1031/400/300'
  },
  {
    id: 3,
    name: '纽约',
    tagline: '不夜城，世界文化熔炉',
    imageUrl: 'https://picsum.photos/id/1039/400/300'
  },
  {
    id: 4,
    name: '东京',
    tagline: '传统与未来的交汇点',
    imageUrl: 'https://picsum.photos/id/1052/400/300'
  },
  {
    id: 5,
    name: '伦敦',
    tagline: '历史悠久的雾都',
    imageUrl: 'https://picsum.photos/id/1061/400/300'
  },
  {
    id: 6,
    name: '巴黎',
    tagline: '艺术与浪漫的代名词',
    imageUrl: 'https://picsum.photos/id/1060/400/300'
  }
]);

// 搜索处理
const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    searchResults.value = [];
    return;
  }

  // 过滤搜索结果（不区分大小写）
  const query = searchQuery.value.toLowerCase();
  searchResults.value = cities.value.filter(city =>
    city.name.toLowerCase().includes(query) ||
    city.country.toLowerCase().includes(query)
  );
};

// 导航到城市详情页
const navigateToCity = (cityId) => {
  router.push({ path: '/city-info', query: { id: cityId } });
  searchQuery.value = '';
  searchResults.value = [];
};

// 轮播图控制
const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % carouselImages.value.length;
};

const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + carouselImages.value.length) % carouselImages.value.length;
};

const goToSlide = (index) => {
  currentSlide.value = index;
};

// 自动轮播
onMounted(() => {
  slideInterval = setInterval(nextSlide, 5000);

  // 点击页面其他区域关闭搜索结果
  document.addEventListener('click', (e) => {
    const searchEl = document.querySelector('.search-container');
    if (!searchEl.contains(e.target)) {
      searchResults.value = [];
    }
  });
});

onUnmounted(() => {
  clearInterval(slideInterval);
});
</script>

<style scoped>
/* 保持原有样式不变 */
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.page-title {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-size: 2.2rem;
}

.search-container {
  max-width: 600px;
  margin: 0 auto 2rem;
  position: relative;
}

.search-box {
  display: flex;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 30px;
  overflow: hidden;
}

.search-input {
  flex: 1;
  padding: 12px 20px;
  border: none;
  outline: none;
  font-size: 1rem;
}

.search-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0 18px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #2980b9;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 10;
  margin-top: 5px;
  max-height: 200px;
  overflow-y: auto;
}

.result-item {
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.result-item:hover {
  background-color: #f5f7fa;
}

.carousel {
  position: relative;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 3rem;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  padding: 1.5rem;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.3);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.carousel-control.prev {
  left: 10px;
}

.carousel-control.next {
  right: 10px;
}

.carousel-control:hover {
  background-color: rgba(0,0,0,0.6);
}

.carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-indicators button.active {
  background-color: white;
}

.city-highlights {
  margin: 3rem 0;
}

.city-highlights h2 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.city-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
  cursor: pointer;
}

.city-card:hover {
  transform: translateY(-5px);
}

.city-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.city-card-info {
  padding: 1.5rem;
}

.city-card-info h3 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.city-card-info p {
  color: #555;
  margin: 0;
}

@media (max-width: 768px) {
  .carousel {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .carousel {
    height: 200px;
  }

  .page-title {
    font-size: 1.8rem;
  }
}
</style>
